<template>
	<div class="page">
		<Head navTitle="账单记录" />
		<div class="page-container ">
			<div class="bs-panel ht-panel">
				<div class="bs-m_reord">
					<div class="game-vs">
						<div class="vs-title">澳大利亚职业足球联赛</div>
						<div class="vs-flex flex-center flex-hc">
							<div class="vs-title">神户胜利船shenghushenglichuan</div>
							<div class="vs-card_bd">
								<div class="vs-value">反波胆 <span class="score">0-1</span></div>
								<div class="vs-time">2021 04-21 04:00</div>
							</div>
							<div class="vs-title">德岛漩涡dedaoxuanwo</div>
						</div>
					</div>
					<!-- APP-账单记录-详情-单场 -->
					<div class="bill-list">
						<div class="bill-list-cell">
							<div class="text">注单编号</div>
							<div class="value">#2103470297492179247</div>
						</div>
						<div class="bill-list-cell">
							<div class="text">下单时间</div>
							<div class="value">2021-09-06 19:00:00</div>
						</div>
						<div class="bill-list-cell">
							<div class="text">市场</div>
							<div class="value">guangzhou citychongqingliangjiang athletlc</div>
							<div class="value">09-06 19:00 中国超级联赛</div>
						</div>
						<div class="bill-list-cell">
							<div class="text">波胆</div>
							<div class="value">0-0 <span class="text-green">@4.06%</span></div>
						</div>
						<div class="bill-list-cell">
							<div class="text">交易金额</div>
							<div class="value"><span class="text-green">5,000.00</span></div>
						</div>
						<div class="bill-list-cell">
							<div class="text">备注</div>
							<div class="value">暂无</div>
						</div>
						<div class="bill-list-cell">
							<div class="text">获利</div>
							<div class="value"><span class="text-red">未结算</span></div>
						</div>
					</div>
					<!-- APP-账单记录-详情-多场 -->
					<div class="bill-list">
						<van-collapse v-model="activeNames">
							<van-collapse-item name="1">
								<template #title>
									<div class="bill-list-card" >
										<div class="bill-card-row">
											<div class="bill-card-col">
												<div class="label">注单编号zhudanbianhao</div>
												<div class="val">#2103470297492179247</div>
											</div>
											<div class="bill-card-col">
												<div class="label">市场shichang</div>
												<div class="val">guangzhou</div>
											</div>
										</div>
										<div class="bill-card-row">
											<div class="bill-card-col">
												<div class="label">波胆botan</div>
												<div class="val">0-0 <span class="text-green">@4.06%</span></div>
											</div>
											<div class="bill-card-col">
												<div class="label">获利huoli</div>
												<div class="val"><span class="text-green">4.3%</span></div>
											</div>
										</div>
										<div class="bill-card-row">
											<div class="bill-card-col">
												<div class="label">下注金额xaizhujine</div>
												<div class="val">200,000.00</div>
											</div>
											<div class="bill-card-col">
												<div class="label">预计收益yujishouyi</div>
												<div class="val"><span class="text-green">8,246.00</span></div>
											</div>
										</div>
									</div>
								</template>
								<div class="bill-list">
									<div class="bill-list-cell">
										<div class="text">注单编号</div>
										<div class="value">#2103470297492179247</div>
									</div>
									<div class="bill-list-cell">
										<div class="text">下单时间</div>
										<div class="value">2021-09-06 19:00:00</div>
									</div>
									<div class="bill-list-cell">
										<div class="text">市场</div>
										<div class="value">guangzhou citychongqingliangjiang athletlc</div>
										<div class="value">09-06 19:00 中国超级联赛</div>
									</div>
									<div class="bill-list-cell">
										<div class="text">波胆</div>
										<div class="value">0-0 <span class="text-green">@4.06%</span></div>
									</div>
									<div class="bill-list-cell">
										<div class="text">交易金额</div>
										<div class="value"><span class="text-green">5,000.00</span></div>
									</div>
									<div class="bill-list-cell">
										<div class="text">备注</div>
										<div class="value">暂无</div>
									</div>
									<div class="bill-list-cell">
										<div class="text">获利</div>
										<div class="value"><span class="text-red">未结算</span></div>
									</div>
								</div>
							</van-collapse-item>
							<van-collapse-item name="2">
								<template #title>
									<div class="bill-list-card" >
										<div class="bill-card-row">
											<div class="bill-card-col">
												<div class="label">注单编号zhudanbianhao</div>
												<div class="val">#2103470297492179247</div>
											</div>
											<div class="bill-card-col">
												<div class="label">市场shichang</div>
												<div class="val">guangzhou</div>
											</div>
										</div>
										<div class="bill-card-row">
											<div class="bill-card-col">
												<div class="label">波胆botan</div>
												<div class="val">0-0 <span class="text-green">@4.06%</span></div>
											</div>
											<div class="bill-card-col">
												<div class="label">获利huoli</div>
												<div class="val"><span class="text-green">4.3%</span></div>
											</div>
										</div>
										<div class="bill-card-row">
											<div class="bill-card-col">
												<div class="label">下注金额xaizhujine</div>
												<div class="val">200,000.00</div>
											</div>
											<div class="bill-card-col">
												<div class="label">预计收益yujishouyi</div>
												<div class="val"><span class="text-green">8,246.00</span></div>
											</div>
										</div>
									</div>
								</template>
								<div class="bill-list">
									<div class="bill-list-cell">
										<div class="text">注单编号</div>
										<div class="value">#2103470297492179247</div>
									</div>
									<div class="bill-list-cell">
										<div class="text">下单时间</div>
										<div class="value">2021-09-06 19:00:00</div>
									</div>
									<div class="bill-list-cell">
										<div class="text">市场</div>
										<div class="value">guangzhou citychongqingliangjiang athletlc</div>
										<div class="value">09-06 19:00 中国超级联赛</div>
									</div>
									<div class="bill-list-cell">
										<div class="text">波胆</div>
										<div class="value">0-0 <span class="text-green">@4.06%</span></div>
									</div>
									<div class="bill-list-cell">
										<div class="text">交易金额</div>
										<div class="value"><span class="text-green">5,000.00</span></div>
									</div>
									<div class="bill-list-cell">
										<div class="text">备注</div>
										<div class="value">暂无</div>
									</div>
									<div class="bill-list-cell">
										<div class="text">获利</div>
										<div class="value"><span class="text-red">未结算</span></div>
									</div>
								</div>
							</van-collapse-item>
						</van-collapse>
					</div>

					<div class="bs-pagination flex-center flex-hc">
						<el-pagination @size-change="handleSizeChange" :current-page="currentPage"
							:page-sizes="[10, 20, 30, 40]" :page-size="100" layout="prev, pager, next" :total="400">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				activeName: 'bweek',
				tableData: [{
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, ],
				count: 10,
				loading: false,
				currentPage: 1,
				// 宽度
				windowWidth: document.documentElement.clientWidth,
				activeNames: ['111'],

			};
		},
		computed: {
			noMore() {
				return this.count >= 20
			},
			disabled() {
				return this.loading || this.noMore
			}
		},
		mounted() {
			var that = this;
			window.onresize = () => {
				return (() => {
					window.fullWidth = document.documentElement.clientWidth;
					that.windowWidth = window.fullWidth; // 宽
				})()
			};
		},
		methods: {
			load() {
				this.loading = true
				setTimeout(() => {
					for (let i = 0; i < 15; i++) {
						this.tableData.push({
							date: '2021-09-06',
							jprice: '210,000.00',
							income: '289,832,201.00'
						});
					}
					this.loading = false
				}, 2000)
			},
			handleSizeChange() {

			},
			// table点击
			openDetails(row) {
				console.log(row.date)
				let that = this;
				console.log("实时屏幕宽度：", that.windowWidth);
				if (that.windowWidth < 1000) {
					this.$router.push('/activityDetail');
				} else {
					alert(row.date)
				}
			}
		}
	}
</script>
